/*
 * @Description: effect Hook
 * @Author: 姚泽毅
 * @Date: 2021-09-02 17:25:33
 * @LastEditTime: 2021-09-02 18:48:33
 */
import React from 'react'
import ReactDOM from 'react-dom'

export default function Demo() {
    const [count, setCount] = React.useState(0)

    const myRef = React.useRef()

    React.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count + 1)
            console.log("1");
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])

    function add() {
        // setCount(count + 1)
        setCount(count => count + 1)
    }

    function show() {
        alert(myRef.current.value)
    }

    function unmount() {
        ReactDOM.unmountComponentAtNode(document.getElementById("root"))
    }
    return (
        <div>
            <input type="text" ref={myRef} placeholder="输入数据" />
            <h2>当前求和为：{count}</h2>
            <button onClick={add}>点击加1</button>
            <button onClick={unmount}>卸载组件</button>
            <button onClick={show}>点我提示数据</button>
        </div>
    )
}